<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<view class="page-container">
			<view class="page-header">
				<view class="header-tabBar">
					<block v-for="(item, index) in tabs1" :key="index">
						<view class="page-flex" :class="item.key == type ? 'tabBarActive1' : ''" @click="onTabBarActive1(item.key)">
							{{ item.text }}
						</view>
					</block>
				</view>
				<view class="header-tabBar2">
					<block v-for="(item, index) in tabs2.list" :key="index">
						<view class="page-flex" :class="item.id == status ? 'tabBarActive2' : ''"
							:style="{ 'width': `${tabs2.width}rpx` }" @click="onTabBarActive2(item.id)">
							{{ item.text }}
						</view>
					</block>
				</view>
			</view>
			<view class="page-content">
				<block v-for="(item, index) in dataList" :key="index">
					<view class="content-order-list">
						<block v-for="goods in item.orderProductDTOList" :key="goods.id">
							<view class="orderDetail-item" @click="goOrderDetail(item.id)">
								<view class="orderDetail-item-img">
									<image :src="goods.thumbnail" mode="widthFix" />
								</view>
								<view class="orderDetail-item-text">
									<view>{{ goods.name }}</view>
								</view>
								<view class="orderDetail-item-price">
									<view>￥<text>{{ goods.singlePrice != null ? goods.singlePrice : 0 }}</text></view>
									<text>×{{ goods.number }}</text>
								</view>
							</view>
						</block>
						<view class="order-actual-payment" @click="goOrderDetail(item.id)">
							实付款￥<text>{{ item.realityPrice }}</text>
						</view>
						<view class="order-state" @click="goOrderDetail(item.id)">{{ item.orderStatus }}</view>
						<view class="order-btns">
							<block v-if="item.status == 0">
								<view class="page-flex" @click="goPay(item)">立即支付</view>
							</block>

							<block v-if="item.status == 1">
								<view class="page-flex" @click="joinCart(item.orderProductDTOList)">
									重新购买
								</view>
							</block>
							<!-- 
							<block v-if="item.status == 2 && item.logisticsStatus == 0">
								<view class="page-flex" @click="onUrgeShipment">催发货</view>
							</block> -->

							<block v-if="item.status == 2 && item.logisticsStatus == 1">
								<block v-if="type == 0">
									<view class="page-flex" @click="onConfirmTake(item.id)">
										确认收货
									</view>
									<view class="page-flex" @click="onLookLogistics(item)">
										查看物流
									</view>
								</block>
							</block>

							<block v-if="item.status == 2 && (item.logisticsStatus == 2) && item.refundStatus == 0 && type == 0">
								<view class="page-flex" @click="goGoodsCreate(item.id)">去评价</view>
							</block>

							<!-- 平台 待发货直接退款 -->
							<block v-if="item.status == 2 && item.logisticsStatus == 0 && item.refundStatus == 0 && type == 0">
								<view class="page-flex" @click="onOrderRefund1(item)">退款</view>
							</block>

							<!-- 社区店 待发货直接退款 -->
							<block v-if="item.status == 2 && item.logisticsStatus == 0 && item.refundStatus == 0 && type == 1">
								<view class="page-flex" @click="onOrderRefund1(item)">退款</view>
							</block>

							<!-- 平台 已到货退款退货 -->
							<block v-if="item.status == 2 && item.logisticsStatus == 2 && item.refundStatus == 0 && type == 0">
								<view class="page-flex" @click="onOrderRefund2(item)">退款</view>
							</block>

							<block v-if="item.logisticsStatus == 3">
								<view class="page-flex" @click="goRefundDetails(item.id)">查看详情</view>
							</block>

							<block v-if="item.status == 4 && type == 0">
								<view class="page-flex" @click="joinCart(item.orderProductDTOList)">再来一单</view>
							</block>

						</view>
					</view>
				</block>
			</view>
		</view>
	</z-paging>
</template>
<script>
	import {
		getUserInfo
	} from '@/common/auth';

	export default {
		data() {
			return {
				userId: getUserInfo().ypdUser?.userId,
				dataList: [],
				page: {
					size: 40,
					current: 1,
				},
				tabs1: [{
						text: '线上购',
						key: 0
					},
					{
						text: '兜自提',
						key: 1
					}
				],
				tabs2: {
					width: 120,
					list: [{
							key: -1,
							text: '全部',
							id: -1
						},
						{
							key: 1,
							text: '待付款',
							info: '',
							id: 1
						},
						{
							key: 2,
							text: '待发货',
							info: '',
							id: 2
						},
						{
							key: 3,
							text: '已发货',
							info: '',
							id: 3
						},
						{
							key: 4,
							text: '待评价',
							info: '',
							id: 4
						},
					]
				},
				tabs3: {
					width: 120,
					list: [{
							key: -1,
							text: '全部',
							id: -1
						},
						{
							key: 1,
							text: '待付款',
							info: '',
							id: 1
						},
						{
							key: 2,
							text: '待配货',
							info: '',
							id: 2
						},
						{
							key: 3,
							text: '待取货',
							info: '',
							id: 3
						},
						{
							key: 4,
							text: '已完成',
							info: '',
							id: 4
						},
					]
				},
				type: 0,
				status: 1,
				orderList: [],
				total: 0,
			}
		},
		onLoad(option) {
			const {
				status
			} = option;
			this.status = status
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.paging.reload();
			})
		},
		methods: {
			goPay(item) {
				this.$goPath(2, `/pages/premiumBag/mine/orderDetail?orderId=${item.id}&type=${this.type}`)
			},
			async queryList(pageNo, pageSize) {
				const {
					page,
					type,
					userId,
					status
				} = this;

				const param = {
					page: {
						current: pageNo,
						size: pageSize
					},
					query: {
						type,
						userId
					}
				};
				if (status != -1) {
					param.query.status = status;
				}
				if (status == 1) {
					param.query.status = 0;
				}
				if (status == 2) {
					param.query.logisticsStatus = 0;
				}
				if (status == 3) {
					param.query.status = 2;
					param.query.logisticsStatus = 1;
				}
				if (status == 4) {
					param.query.status = 2;
					param.query.logisticsStatus = 2;
					param.query.evaluateStatus = 0;
				}
				//兜自提 已完成
				if (status == 4 && type == 1) {
					param.query.status = 4;
				}
				const result = await this.$request.miniOrderFindByPage(param)
				let arr = result.data.records
				arr.map(item => {
					if (item.status == 0) item.orderStatus = '订单即将关闭，建议尽快付款';
					if (item.status == 1) item.orderStatus = '订单已取消';
					if (item.status == 2 && item.logisticsStatus == 0) item.orderStatus = '商家还没有发货，请耐心等待';
					if (item.status == 2 && item.logisticsStatus == 0 && type == 1) item.orderStatus = '商家还未配货，请耐心等待';
					if (item.status == 2 && item.logisticsStatus == 1) item.orderStatus = '订单已发货，请注意查看物流';
					if (item.status == 2 && item.logisticsStatus == 1 && type == 1) item.orderStatus = '商家已配货完成，请尽快取货';
					if (item.status == 2 && item.logisticsStatus == 2 && item.refundStatus == 0 && item.evaluateStatus ==
						0) {
						item.orderStatus = '您的商品已确认收货，您还没有评价';
					}
					if (item.status == 2 && item.logisticsStatus == 2 && item.refundStatus == 0 && item.evaluateStatus ==
						0 && type == 1) {
						item.orderStatus = '订单已完成';
					}
					if (item.status == 2 && item.logisticsStatus == 3) item.orderStatus = '您的商品正在退货中';
					if (item.status == 3 && item.refundStatus == 1) item.orderStatus = '您的订单正在退货中';
					if (item.status == 3 && item.logisticsStatus == 4) item.orderStatus = '退货成功';
					if (item.status == 3 && item.logisticsStatus == 0 && item.refundStatus == 2) item.orderStatus = '退款成功';
					if (item.status == 4 && item.refundStatus == 2) item.orderStatus = '退货成功，订单已完成';
					if (item.status == 4 && item.refundStatus == 3) item.orderStatus = '退款失败';
					if (item.status == 4 && item.refundStatus == 4) item.orderStatus = '已取消退款';
					if (item.status == 4 && item.logisticsStatus == 2 && item.refundStatus == 0 && type == 1) item
						.orderStatus = '订单已完成';
					if (item.status == 4 && item.logisticsStatus == 2 && item.refundStatus == 0 && item.evaluateStatus != 0)
						item.orderStatus = '订单已完成';
				});
				this.$refs.paging.complete(arr);
			},
			onTabBarActive1(key) {
				this.type = key
				this.status = -1
				if (key == 0) {
					this.tabs2 = {
						width: 120,
						list: [{
								key: -1,
								text: '全部',
								id: -1
							},
							{
								key: 0,
								text: '待付款',
								info: '',
								id: 0
							},
							{
								key: 2,
								text: '待发货',
								info: '',
								id: 2
							},
							{
								key: 3,
								text: '已发货',
								info: '',
								id: 3
							},
							{
								key: 4,
								text: '待评价',
								info: '',
								id: 4
							},
						]
					}
				} else if (key == 1) {
					this.tabs2 = {
						width: 120,
						list: [{
								key: -1,
								text: '全部',
								id: -1
							},
							{
								key: 1,
								text: '待付款',
								info: '',
								id: 1
							},
							{
								key: 2,
								text: '待配货',
								info: '',
								id: 2
							},
							{
								key: 3,
								text: '待取货',
								info: '',
								id: 3
							},
							{
								key: 4,
								text: '已完成',
								info: '',
								id: 4
							},
						]
					}
				}
				this.orderList = []
				this.$refs.paging.reload();
			},
			onTabBarActive2(id) {
				this.status = id
				this.$refs.paging.reload();
			},
			//重新购买
			joinCart(goods) {
				const {
					userId
				} = this;
				goods.map(item => {
					const param = {
						number: item.number,
						productSpecsId: item.productSpecsId,
						productUpId: item.productUpId,
						productUpId: item.productUpId,
						userId
					}
					this.$request.miniAdd2ShoppingCar(param).then(res => {
						if (res.msg == '成功') {
							this.$toast('已加入购物车')
						} else {
							this.$toast(res.msg)
						}
					});
				})
			},

			//催发货
			onUrgeShipment() {
				this.$toast('已提醒卖家尽快发货！')
			},

			//确认收货
			onConfirmTake(orderId) {
				this.$request.miniConfirmTake({
					orderId
				}).then(res => {
					if (res.msg == '成功') {
						this.$toast('确认收货成功')
						this.$refs.paging.reload();
					}
				})
			},

			//查看物流
			onLookLogistics(item) {
				item.orderProductDTOList.map(item => {
					item.thumbnail = encodeURIComponent(item.thumbnail);
				});
				this.$goPath(2,
					`/pages/premiumBag/mine/orderLogistics?orderId=${item.id}&logisticsNo=${item.logisticsNo}&orderNo=${item.orderNo}&logisticsWay=${item.logisticsWay}`
				)
			},

			//待发货直接退款
			onOrderRefund1(item) {
				const {
					type
				} = this;
				item.orderProductDTOList.map(ite => {
					ite.thumbnail = encodeURIComponent(ite.thumbnail.replace(/\\/g, '/'));
				});
				this.$goPath(2,
					`/pages/premiumBag/mine/orderRefund?orderId=${item.id}&status=${item.logisticsStatus}&orderType=${type}`
				)
			},

			//申请退款
			onOrderRefund2(item) {
				item.orderProductDTOList.map(ite => {
					ite.thumbnail = encodeURIComponent(ite.thumbnail.replace(/\\/g, '/'));
				});
				this.$goPath(2,
					`/pages/premiumBag/mine/orderRefund?orderId=${item.id}&status=${item.logisticsStatus}&orderType=0`
				)
			},

			//查看退款详情
			goRefundDetails(id) {
				this.$goPath(2, `/pages/premiumBag/mine/refundDetails?orderId=${id}`)
			},
			//去评价 
			goGoodsCreate(id) {
				this.$goPath(2, `/pages/premiumBag/goods/createEval?orderId=${id}`)
			},

			//去订单详情
			goOrderDetail(id) {
				const {
					type
				} = this;
				this.$goPath(2, `/pages/premiumBag/mine/orderDetail?orderId=${id}&type=${type}`)
			},

		}
	}
</script>
<style scoped>
	.page-container {
		height: 100%;
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
	}

	.page-header {
		padding: 24rpx;
		background-color: #fff;
	}

	.page-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-tabBar {
		height: 80rpx;
		display: flex;
		background-color: #F6F6F6;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		box-shadow: 2rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.01);
		border-radius: 120rpx;
		padding: 7rpx;
	}

	.header-tabBar>view {
		flex: 1;
		border-radius: 120rpx;
	}

	.tabBarActive1 {
		background-color: #fff;
		color: #32B499;
	}

	.header-tabBar2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;
	}

	.header-tabBar2>view {

		height: 48rpx;
		background: #F6F6F6;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.header-tabBar2 .tabBarActive2 {
		background-color: #32B499;
		color: #fff;
	}

	.page-content {
		flex: 1;
		/* padding: 24rpx; */
		overflow: scroll;
	}

	.page-content::-webkit-scrollbar {
		width: 0;
	}

	.content-order-list {
		background-color: #fff;
		padding: 24rpx;
		box-shadow: 2rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.01);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 24rpx;
	}

	.orderDetail-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24rpx;
		color: #999999;
		font-size: 25rpx;
	}

	.orderDetail-item-img {
		width: 128rpx;
		height: 128rpx;
	}

	.orderDetail-item-img image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx 10rpx;
		display: block;
	}

	.orderDetail-item-text {
		width: 372rpx;
		display: flex;
		flex-direction: column;
		line-height: 40rpx;
	}

	.orderDetail-item-text>view:first-child {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #333;
	}

	.orderDetail-item-price {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.orderDetail-item-price>view {
		color: #333;
	}

	.orderDetail-item-price>view>text {
		font-size: 32rpx;
	}

	.orderDetail-item-price>text {
		font-size: 24rpx;
	}

	.order-state {
		line-height: 50rpx;
		background: #F6F6F6;
		font-size: 28rpx;
		color: #32B499;
		padding: 10rpx 16rpx;
		border-radius: 16rpx;
		margin: 24rpx 0;
	}

	.order-actual-payment {
		text-align: right;
		font-size: 24rpx;
		color: #333333;
		margin-top: 24rpx;
	}

	.order-actual-payment text {
		font-size: 40rpx;
		font-weight: bold;
		color: #EA5F5F;
	}

	.order-btns {
		display: flex;
		flex-direction: row-reverse;
		justify-self: flex-start;
	}

	.order-btns>view {
		width: 180rpx;
		height: 60rpx;
		background: #F6F6F6;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		font-size: 28rpx;
		color: #333333;
		margin-left: 24rpx;
	}

	.order-btns>view:first-child {
		background: #32B499;
		color: #fff;
	}
</style>